<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			margin: 0;padding: 0;
		}
		.wrap{
			width: 100px;height: 100px;float: left;
			position: relative;
			/*border:2px solid #ccc;*/
		}
		.small{
			width: 20px;height:20px;/*border:1px solid #ccc;*/
			background: rgba(225,225,225,.8);
			position: absolute;display: none;left: 0;top:0;
		}
		.wrap img {
			width:100%;
		}
		.lag{
			float: left;margin-left:100px;display: none;
			width:200px;height: 200px;overflow: hidden;position: relative;
			border:1px solid red;
		}
		.lag img{
			/*width: 400px;*/
			position: absolute;left: 0;top:0;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<img src="timg7.jpg">
		<div class="small"></div>
	</div>
	<div class="lag">
		<img id="lg-img" src="timg7.jpg">
	</div>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var natWidth = $('#lg-img').width();
			var bei = 2.9;
			console.log(natWidth);
			$('.wrap').mousemove(function(e){
				$("#lg-img").show();
				$('.small').show();
				$('.lag').show();
				var pX = e.pageX,
					pY =e.pageY;
					var sMoveX = pX-10<0?0:pX-10;
					var sMoveY = pY-10<0?0:pY-10;
					console.log('1',pX,pY)
					$('#lg-img').css({
						top:-(pY)*0.5+'px',
						left:-(pX)*0.5+'px'
					})

					if(sMoveX>80){
						sMoveX = 80;
						
					}if(sMoveY>80){
						sMoveY = 80;
						
					}
					if(pX>100 || pY>100){
						$('.small').hide()
					}
					console.log('2',sMoveX,sMoveY);
					$('.small').css({
						top:sMoveY+'px',
						left:sMoveX+'px'
					})
			})
			$('.wrap').mouseout(function(){
				$('.lag').hide();
			})
		})
		
	</script>

</body>
</html>
